<template>
    <div class="alipay-box">
        <div class="alipay-return">
            <i @click="plipayreturn()" class=" plipayticon iconfont icon-jiantou"></i>
            <span>钱包</span>
        </div>
        <div class="alipay-title-box">
            <div class="alipay-title">
                <div class="alipay-title-left">
                    <img src="../../assets/img/cashout-icon-alipay@2x.png" alt="">
                    <span>支付宝</span>
                </div>
                <div v-if="!aliplayName" class="alipay-title-right" @click="binding()">
                    <span>添加账号&nbsp&nbsp<i class="plipayicon iconfont icon-iconfontyoujiantou"></i></span>
                </div>
               <div v-else class="alipay-title-solve" @click="unpayment()">
                   <span>{{aliplayName}}</span>
                   <span style="margin-left: 15px;">解绑</span>
               </div>
            </div>
            <div v-if="!aliplayName" class="alipay-contant">
                <span>你还没有添加支付宝账号，请添加</span>
            </div>
        </div>
        <div class="plipaycash">
            <p>提现金额</p>
            <div class="plipaymoney">￥ <input type="text" class="play-input" placeholder="最小提现金额10元" v-model="cash"></div>
            <h1>可提现金额￥{{balance}}<span @click="allBalanceCli">&nbsp&nbsp全部提现</span></h1>
            <div @click="cashBalance" class="plipaycash-btn">提现</div>
        </div>
        <div class="withdrawal">
            <p>提现说明</p>
            <span>1.最小可提现金额10元</span><br>
            <span>2.提现通过支付宝发放，请提前添加支付宝账号</span>
        </div>
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <div class="block" >
                    <p>解绑支付宝账号</p>
                    <h2>请确认是否解绑当前支付宝账号？</h2>
                    <div class="block-box">
                        <div class="block-left" @click="blockfalse">
                         取消
                        </div>
                        <div class="block-right" @click="blocksure">
                         确认解绑
                        </div>
                    </div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import { Toast } from 'vant';  
    export default {
        name: "alipay",
        data() {
            return {
                cash:'',
                show:false,
                aliplayName:"",
                userId:"",
                initList:{},
                balance:""
            }
        },
        methods: {
            initData(){
                this.$http.post(this.utils.config+"/netmall/app/person/api/getUserWallet?user_id="+this.userId).then((data) => {
                    // if(data.data.result.alipayAccount_state){
                    //     this.aliplayName = data.data.result.tbUserAlipay.alipayAccount;
                    // }else{
                    //     this.aliplayName = "";
                    // }
                    this.aliplayName = data.data.result.alipayAccount.alipayAccount;
                    this.balance = data.data.result.walletData.balance;
                })
            },
            //全部体现
            allBalanceCli(){
                this.cash = this.balance;
            },
            cashBalance(){
                if(!this.aliplayName){
                    Toast('请先绑定支付宝账号');
                    return
                }
                if(!this.cash || Number(this.cash)<10){
                    Toast('最小可提现金额10元');
                    return
                }
                if(Number(this.cash)>Number(this.balance)){
                    Toast('钱包余额不足');
                    return
                }
                this.$http.post(this.utils.config+"/netmall/app/person/api/saveCashData?userId="+this.userId+"&cashBalance="+this.cash).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                        this.initData();
                    }
                })
            },
            plipayreturn() {
                this.$router.go(-1);
            },
            unpayment(){
              this.show=true;
            },
            blockfalse(){
                this.show=false
            },
            blocksure(){               
                this.$http.post(this.utils.config + "/netmall/app/person/api/uncashAlipayBinding?user_id="+this.userId).then((data) => {
                    if (data.data.success) {
                        Toast(data.data.message);
                        this.show=false;
                        this.initData();
                    }
                })
            },
            binding(){
                this.$router.push('/playbinding');
            }
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.initData();
        }
    }
</script>

<style scoped>
    @import "../../assets/font/iconfont.css";
    .block{
        width:302px;
        height:217px;
        background:rgba(255,255,255,1);
        border-radius:10px;
        text-align: center;
    }
    .block p{
        margin-top: 25px;
        font-size:18px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:25px;
    }
    h2{
        margin-top: 33px;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:20px;
    }
    .block-box{
        margin-top: 40px;
        padding: 0 18px;
    }
    .block-left{
        float: left;
        width:124px;
        height:38px;
        background:rgba(237,237,237,1);
        border-radius:19px;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:38px;
    }
    .block-right{
        float: right;
        width:124px;
        height:38px;
        background:linear-gradient(90deg,rgba(255,90,160,1) 0%,rgba(255,46,103,1) 100%);
        border-radius:19px;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:38px;
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .alipay-box {

    }

    .alipay-return {
        width: 100%;
        padding: 12px 14px 0 14px;
        height: 56px;
        background: rgba(255, 255, 255, 1);
        text-align: center;
        position: relative;
    }

    .alipay-return span {
        margin-top: 12px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
    }

    .plipayticon {
        font-size: 18px;
        color: #000000;
        font-weight: 900;
        position: absolute;
        top: 12px;
        left: 14px;
    }

    .alipay-title-box {
        padding: 0 14px;
        background: rgba(255, 255, 255, 1);
        width: 100%;
    }

    .alipay-title {
        height: 40px;
        width: 100%;
        background: rgba(255, 255, 255, 1);
    }

    .alipay-title-left {
        float: left;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
    }

    .alipay-title-left img {
        width: 22px;
        height: 22px;
    }

    .alipay-title-right {
        float: right;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        line-height: 22px;
    }

    .plipayicon {
        font-size: 12px;
    }

    .alipay-contant {
        height: 46px;
        width: 100%;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        line-height: 46px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 46, 103, 1);
    }

    .plipaycash {
        margin-top: 6px;
        width: 100%;
        padding: 18px 14px 0 14px;
        height: 209px;
        background: rgba(255, 255, 255, 1);
    }
    .plipaycash p{
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:20px;
    }
    .plipaymoney{
        height: 56px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        font-size:26px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:56px;
    }
    .play-input{
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(180,180,180,1);
        line-height:22px;
        border: none;
    }
    h1{
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:49px;
    }
    h1 span{
        color:rgba(233,167,141,1);
    }
    .plipaycash-btn{
        width: 100%;
        height:45px;
        background:linear-gradient(90deg,rgba(255,90,160,1) 0%,rgba(255,46,103,1) 100%);
        border-radius:4px;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:45px;
        text-align: center;
    }
    .withdrawal{
     padding: 0 14px;
    }
    .withdrawal p{
        margin: 25px auto auto 4px;
        font-size:14px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:20px;
    }
    .withdrawal span{
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:22px;
        margin-left:5px ;
    }
    .alipay-title-solve{
        float: right;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color:rgba(255,46,103,1);

    }

</style>
